<!-- eslint-disable vue/no-v-html -->
<template>
  <section class="page-container-package">
    <section :id="`meta`" class="area">
      <h1 class="title">{{ title }}</h1>
      <div class="description" v-html="description"></div>
      <div class="md-desc-dec md-html" v-html="mdDescHtml"></div>
    </section>

    <section class="area demos">
      <h2>代码演示</h2>
      <demo-box
        v-for="(demo, index) of demos"
        :id="`demo-${demo.name}`"
        :key="demo.name"
        :class="`demo-box demo-box${index}`"
      >
        <template #title> {{ demo.title || `Demo${index + 1}` }} </template>
        <template #description>
          <div v-html="demo.desc"></div>
        </template>
        <template #view><component :is="demo.name" /></template>
        <template #code>
          <pre><code class="language-javascript">{{ demo.code }}</code></pre>
        </template>
      </demo-box>
    </section>

    <section class="area api">
      <h2 :id="`api`">API</h2>
      <div v-if="apiDocs.props?.length" class="api-box">
        <a-table
          :columns="[
            { title: '参数', dataIndex: 'name' },
            { title: '说明', dataIndex: 'desc' },
            { title: '类型', dataIndex: 'type' },
            { title: '默认值', dataIndex: 'default' },
          ]"
          :data-source="apiDocs.props"
          :pagination="false"
        />
      </div>
      <div v-if="apiDocs.slots?.length" class="api-box">
        <h3>插槽</h3>
        <a-table
          :columns="[
            { title: '名称', dataIndex: 'name' },
            { title: '说明', dataIndex: 'desc' },
          ]"
          :data-source="apiDocs.slots"
          :pagination="false"
        />
      </div>
      <div v-if="apiDocs.events?.length" class="api-box">
        <h3>事件</h3>
        <a-table
          :columns="[
            { title: '名称', dataIndex: 'name' },
            { title: '说明', dataIndex: 'desc' },
          ]"
          :data-source="apiDocs.events"
          :pagination="false"
        />
      </div>
      <div v-if="mdApiHtml" class="md-html md-api-doc" v-html="mdApiHtml"></div>
    </section>
    <anchor-link
      :demos="demos"
      :md-anchor-list="mdAnchorList"
      :get-current-anchor="getCurrentAnchor"
      @click="handleClick"
    />
  </section>
</template>

<script lang="ts" setup>
  import { onMounted, onUpdated, computed, ref, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import axios from 'axios';
  import packages from '@/service/packages';
  import DemoBox from '@/components/demo-box.vue';
  import AnchorLink from './anchor-link.vue';

  const route = useRoute();

  const currentAnchor = ref('meta');
  const apiDocs = ref<any>({});

  const packageName = computed(() => {
    return route.params.name as string;
  });

  const pkg = computed(() => {
    return packages[packageName.value];
  });

  const title = computed(() => {
    return pkg.value.title;
  });
  const description = computed(() => {
    return pkg.value.description;
  });

  const docHtml = computed(() => {
    return pkg.value.docHtml;
  });

  const demos = computed(() => {
    return pkg.value.demos;
  });

  const docHtmlList = computed(() => {
    return docHtml.value.split(/<h2>API<\/h2>/);
  });

  const mdApiHtml = computed(() => {
    return docHtmlList.value[1];
  });

  const mdDescHtml = computed(() => {
    return docHtmlList.value[0].replace(
      /<h2>(.+?)<\/h2>/g,
      (_s: string, s1: string) => `<h2 id="${s1}">${s1}</h2>`
    );
  });

  const mdAnchorList = computed(() => {
    return (mdDescHtml.value.match(/<h2\s.+?<\/h2>/g) || []).map((i: string) =>
      i.replace(/<.+?>/g, '')
    );
  });

  const handleClick = (e, link) => {
    e.preventDefault();
    const el = document.getElementById(link.href)!;
    const yOffset = -80;
    const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;
    currentAnchor.value = link.href;
    window.scrollTo({ top: y, behavior: 'smooth' });
  };

  const getCurrentAnchor = () => {
    return currentAnchor.value;
  };

  function highlight() {
    document.querySelectorAll('pre code').forEach((el: HTMLElement) => {
      (window as any).hljs.highlightElement(el);
    });
  }

  function getAPIDoc() {
    axios
      .get(
        `${import.meta.env.VITE_BASE_URL || ''}/packages/${
          packageName.value
        }/doc.json?${Date.now()}`
      )
      .then((res) => {
        apiDocs.value = res.data;
      });
  }

  watch(route, (_, to) => {
    if (to.name === 'Package') {
      getAPIDoc();
    }
  });

  onMounted(() => {
    highlight();
    getAPIDoc();
  });
  onUpdated(highlight);
</script>
<style lang="less">
  .page-container-package {
    .md-desc-dec {
      li {
        list-style: circle inside;
      }
    }
    .anchor {
      .ant-anchor {
        padding-top: 24px;
      }
    }
    .title {
      margin-top: 8px;
      margin-bottom: 20px;
      color: #000000d9;
      font-size: 26px;
      line-height: 38px;
    }
    h2 {
      font-size: 22px;
    }
    padding-right: 200px;
    .demo-box {
      margin: 60px 0 0;
    }
    .demo-box0 {
      margin: 40px 0 0;
    }
  }
</style>
